<!--
 * @Author: yongqing.cai
 * @Date: 2022-08-12
 -->
<template>
  <div v-show="modelIsOpen" class="modal-content">
    <div id="bdmap"></div>
  </div>
</template>
<script>
import * as mapUtils from '@/utils/bdMap.js'

export default {
  data: function () {
    return {
      modelIsOpen: false,
      map: null
    }
  },
  watch: {
    modelIsOpen: function (val) {
      if (val) {
        this.initMap2()
      }
    }
  },
  methods: {

    initMap2() {
      mapUtils.BMapGeocoder().then(async () => {
        console.log(window)
        try {
          await this.drawMap()
          const geolocation = await this.geolocation()
          console.log(geolocation)
          const address = await this.getAddressByPoint(geolocation.lng, geolocation.lat)
          console.log(address);
        } catch (error) {

        }
      })
    },

    drawMap() {
      return new Promise((resolve, reject) => {
        this.map = new BMapGL.Map('bdmap')
        this.map.centerAndZoom(new BMapGL.Point(116.28019, 40.049191), 19)
        this.map.enableScrollWheelZoom(true)
        this.map.setHeading(64.5)
        this.map.setTilt(73)
        var geoc = new BMapGL.Geocoder()
        this.map.addEventListener('click', async  (e)=> {
          var pt = e.latlng
          // geoc.getLocation(pt, function (rs) {
          //   var addComp = rs.addressComponents
          //   alert(addComp.province + ', ' + addComp.city + ', ' + addComp.district + ', ' + addComp.street + ', ' + addComp.streetNumber)
          // })
          const address = await this.getAddressByPoint(e.latlng.lng, e.latlng.lat)
          console.log(address);
        })
        if (this.map) {
          resolve()
        } else {
          reject(new Error('地图创建成功'))
        }
      })
    },
    geolocation() {
      const that = this
      return new Promise((resolve, reject) => {
        var geolocation = new BMapGL.Geolocation()
        geolocation.getCurrentPosition(function (r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMapGL.Marker(r.point)
            that.map.addOverlay(mk)
            that.map.panTo(r.point)
            // alert('您的位置：' + r.point.lng + ',' + r.point.lat)
            resolve(r.point)
          } else {
            reject(new Error('定位失败'))
          }
        })
      })
    },
    getAddressByPoint(lng, lat) {
      return new Promise((resolve, reject) => {
        var myGeo = new BMapGL.Geocoder()
        myGeo.getLocation(new BMapGL.Point(lng, lat), function (result) {
          if (result) {
            resolve(result.address)
          } else {
            reject(new Error('坐标解释失败'))
          }
        })
      })
    },
    getPointByAddress(address) {
      return new Promise((resolve, reject) => {
        var myGeo = new BMapGL.Geocoder()
        myGeo.getPoint(address, function (point) {
          if (point) {
            resolve(point)
            this.map.centerAndZoom(point, 16);
            this.map.addOverlay(new BMapGL.Marker(point, { title: address }))
          } else {
            reject(new Error('地址解释失败'))
          }
        })
      })
    }
  }
}
</script>
<style lang="scss">
.modal-content {
  position: relative;

  #bdmap {
    width: 100%;
    height: 700px;
  }

}
</style>
